<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 页面搭建 -->
    <h1>天气查询</h1>
    <h3>请输入要查询的城市：</h3>
    <input type="text" id="input-text">
    <input type="button" value="查询" onclick="searchWeather()">
    <h3>查询结果：</h3>
    <ul>
        <li>城市：<span id="city"></span></li>
        <li>天气：<span id="weather"></span></li>
    </ul>
    <!-- ajax -->
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script>
        function searchWeather(){
            var city = $("#input-text").val();
            // url:请求地址
            // type:请求方式，默认是'GET',常用的还有'POST'
            // datatype：返回数据的格式，常用'json'
            // data：发送给服务器的数据，没有参数可不设置（city=北京）
            // success：请求成功后的回调函数
            // error：请求失败后的回调函数
            // async：是否异步，默认true，异步，一般不设置
            $.ajax({
                url:'https://www.tianqiapi.com/api/',
                type:"get",
                dataType:"json",
                data:"city=" + city,
                success:function(resp){
                    $("#city").text(resp.city);
                    $("#weather").text(resp.data[0].wea);
                },
                error:function(){
                    alert("获取不到天气信息，网络异常");

                },
                async: true
            })
        }
    </script>
</body>
</html>